<template>
  <div class="article">
    <!-- 顶部导航开始 -->
    <header>
      <mt-header
        fixed
        style="background-color: #fff; color: black"
        title="特有料"
      >
        <router-link slot="left" to="/news">
          <mt-button icon="back"  @click="$router.go(-1)"></mt-button>
        </router-link>
      </mt-header>
    </header>
    <!-- 导航导航结束 -->

    <!-- 正文区域开始 -->
    <div class="question" style="margin-top: 40px">
      <!-- 标题开始 -->
      <div class="question-header">
        <div class="question-header-title">{{ article.xw_title }}</div>
        <div class="question-header-datetime">
          {{ article.xw_time }}
        </div>
      </div>
      <!-- 标题结束 -->
      <!-- 图片开始 -->
      <div style="height: 45vh">
        <img style="height: 100%; width: 100%" :src="article.xw_src" alt="" />
      </div>
      <!-- 内容开始 -->
      <div class="question-content">
        <div class="rich-content" v-html="article.xw_detail"></div>
      </div>
      <!-- 内容结束 -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      article: "", //保存文章信息
    };
  },
  mounted() {
    let id = this.$route.query.id; //获取上一个页面传来的ID
    if (!id) {
      // alert("上一个页面传过来的文章id参数");
    }
    console.log(id);
    //发送请求,通过id获取当前文章的详细信息
    this.axios
      .get(`/xinwen/selectid?xw_id=${id}`)
      .then((res) => {
        //获取完整的文章对象
        console.log(res.data.r[0]);
        this.article = res.data.r[0];
      });
  },
};
</script>
<style scoped>
.article {
  background: #f6f6f6;
  height: 100vh;
}
.question-header {
  margin-bottom: 5px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
}
.question-header-title {
  font-size: 18px;
  color: #1a1a1a;
  line-height: 1.5;
}
.question-header-datetime {
  margin-top: 5px;
  font-size: 14px;
  color: #646464;
}
.author-info {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 8px 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
}
.author-info-avatar {
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
.author-info-detail {
  margin-left: 15px;
}
.author-info-nickname {
  font-size: 15px;
  margin-bottom: 6px;
}
.author-info-badge {
  font-size: 14px;
}
.question-content {
  padding: 10px;
  background-color: #fff;
}

.rich-content p {
  padding: 5px 0;
  line-height: 1.7;
}
.rich-content img {
  max-width: 100%;
}
</style>
